import React, { Component, Fragment } from 'react';
import {withRouter} from "react-router-dom"
import {SHeader} from "../../styled/all"
import { Menu } from 'antd';
import {GlobalOutlined , InboxOutlined , UserOutlined , UserDeleteOutlined , ShoppingOutlined , HomeOutlined} from "@ant-design/icons";
import {get_goods_kinds} from "../../store/actionCreator";
import store from "../../store/index"
const { SubMenu } = Menu;

class header extends Component {
    constructor(props){
        super(props);
    }
    state = {
        current: 'mail',
    }
    //显示我的账户还是登录注册
    login_or_myself(){
        if(sessionStorage.getItem("username")&& sessionStorage.getItem("userId")){
            return (
                <li onClick={this.jumpRouter.bind(this,"/myself")}><UserOutlined />&nbsp;&nbsp;我的账户 {sessionStorage.getItem("username")}</li>
            )
        }else{
            return (<Fragment>
                <li onClick={this.jumpRouter.bind(this,"/login")}><UserOutlined />&nbsp;&nbsp;登录</li>
                <li onClick={this.jumpRouter.bind(this,"/register")}><UserDeleteOutlined />&nbsp;&nbsp;注册</li>
            </Fragment>)
        }
    }
    jumpRouter(router){
        console.log("ji")
        this.props.history.push(router)
    }
    jumpRouterKind(router,kind){
        this.props.history.push("/list");
        store.dispatch(get_goods_kinds(kind));
    }
    render() {
        const { current } = this.state;
        return (
            <SHeader>
                <div className="content">
                <div className="top">
                    <ul className="left">
                        <li><GlobalOutlined />&nbsp;&nbsp;中国</li>
                        <li><InboxOutlined />&nbsp;&nbsp;店铺</li>
                        <li  onClick={this.jumpRouter.bind(this,"/index")}><HomeOutlined />&nbsp;&nbsp;首页</li>
                    </ul>
                    <ul className="right"> 
                        <li>YAGE</li>
                        {this.login_or_myself.bind(this)()}
                        
                        <li onClick={this.jumpRouter.bind(this,"/shoppingCar")}><ShoppingOutlined />&nbsp;&nbsp;购物车</li>
                    </ul>
                </div>
                <div className="middle">
                    <img src="images/logo.jpg" alt=""/>
                </div>
                <div className="bottom">
                    {/* <ul>
                        <li>新品上市</li>
                        <li>项链</li>
                        <li>耳环</li>
                        <li>戒指</li>
                        <li>链坠</li>
                        <li>套装</li>
                    </ul> */}
                    <Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
                    <Menu.Item key="new">
                    新品上市
                    </Menu.Item>     
                    <SubMenu key="SubMenu" title="首饰">
                    <Menu.ItemGroup title="首饰">
                        <Menu.Item key="setting:1" onClick={this.jumpRouterKind.bind(this,"/list","xianlian")}>项链</Menu.Item>
                        <Menu.Item key="setting:2" onClick={this.jumpRouterKind.bind(this,"/list","lianzhui")}>链坠</Menu.Item>
                        <Menu.Item key="setting:3" onClick={this.jumpRouterKind.bind(this,"/list","erhuan")}>耳环</Menu.Item>
                        <Menu.Item key="setting:4" onClick={this.jumpRouterKind.bind(this,"/list","jiezhi")}>戒指</Menu.Item>
                        <Menu.Item key="setting:5" onClick={this.jumpRouterKind.bind(this,"/list","taozhuang")}>套装</Menu.Item>
                        <Menu.Item key="setting:6" onClick={this.jumpRouterKind.bind(this,"/list","shoulian")}>手链</Menu.Item>

                    </Menu.ItemGroup>
                    </SubMenu>
                    <SubMenu key="peishi" title="配饰">
                    <Menu.ItemGroup title="配饰">
                        <Menu.Item key="setting:1" onClick={this.jumpRouterKind.bind(this,"/list","all")}>热卖单品</Menu.Item>
                        <Menu.Item key="setting:2" onClick={this.jumpRouterKind.bind(this,"/list","phone")}>手机壳</Menu.Item>
                        <Menu.Item key="setting:3" onClick={this.jumpRouterKind.bind(this,"/list","key")}>钥匙扣</Menu.Item>
                        <Menu.Item key="setting:4" onClick={this.jumpRouterKind.bind(this,"/list","pen")}>圆珠笔</Menu.Item>
                    </Menu.ItemGroup>
                    </SubMenu>
                    <Menu.Item key="new">
                    
                    </Menu.Item>
                    <Menu.Item key="alipay">
                    <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
                        {/* 店铺介绍 */}
                    </a>
                    </Menu.Item>
                </Menu>
                </div>
                </div>
            </SHeader>
        )
    }
}
export default withRouter(header)